<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>前端开发 | CatchAdmin 官网</title>
    <meta name="description" content="">
    <meta name="generator" content="VuePress 1.8.2">
    <style>a[title="站长统计"]{display:none}</style>
    <script data-ad-client="ca-pub-1505209242532150" async="true" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script src="https://v1.cnzz.com/z_stat.php?id=1279921342&amp;web_id=1279921342"></script>
    <meta name="description" content="基于 Thinkphp & Vue 开发的后台管理框架">
    <meta name="keywords" content="catchadmin, 后台管理, 前后端分离, thinkphp后台管理框架, thinkphp前后端分离框架,php, elementui">
    <link rel="preload" href="/assets/css/0.styles.6834c255.css" as="style"><link rel="preload" href="/assets/js/app.d0396f44.js" as="script"><link rel="preload" href="/assets/js/2.1cef47df.js" as="script"><link rel="preload" href="/assets/js/14.ec2753db.js" as="script"><link rel="prefetch" href="/assets/js/10.483f2013.js"><link rel="prefetch" href="/assets/js/11.981d4461.js"><link rel="prefetch" href="/assets/js/12.95d2c383.js"><link rel="prefetch" href="/assets/js/13.061c2fe0.js"><link rel="prefetch" href="/assets/js/15.8ba1c321.js"><link rel="prefetch" href="/assets/js/16.f7f0d34c.js"><link rel="prefetch" href="/assets/js/17.aac0bf62.js"><link rel="prefetch" href="/assets/js/18.2e2fe306.js"><link rel="prefetch" href="/assets/js/19.aee304b3.js"><link rel="prefetch" href="/assets/js/20.86a73bc1.js"><link rel="prefetch" href="/assets/js/21.8992c972.js"><link rel="prefetch" href="/assets/js/22.0a78500a.js"><link rel="prefetch" href="/assets/js/23.06342909.js"><link rel="prefetch" href="/assets/js/24.06fd96a3.js"><link rel="prefetch" href="/assets/js/25.00664d4e.js"><link rel="prefetch" href="/assets/js/26.c3d4b548.js"><link rel="prefetch" href="/assets/js/27.3c6927ad.js"><link rel="prefetch" href="/assets/js/28.74498c0b.js"><link rel="prefetch" href="/assets/js/29.aae1a826.js"><link rel="prefetch" href="/assets/js/3.4d2bdca7.js"><link rel="prefetch" href="/assets/js/30.c7732a2c.js"><link rel="prefetch" href="/assets/js/31.20403043.js"><link rel="prefetch" href="/assets/js/32.7b8e9cfe.js"><link rel="prefetch" href="/assets/js/33.8610da11.js"><link rel="prefetch" href="/assets/js/4.d7b1015b.js"><link rel="prefetch" href="/assets/js/5.ff87de2e.js"><link rel="prefetch" href="/assets/js/6.0e91e688.js"><link rel="prefetch" href="/assets/js/7.ba30e213.js"><link rel="prefetch" href="/assets/js/8.35122549.js"><link rel="prefetch" href="/assets/js/9.081b18e5.js">
    <link rel="stylesheet" href="/assets/css/0.styles.6834c255.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="ant-row"><div class="sidebar-button"><i aria-label="icon: bars" class="anticon anticon-bars"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg></i> <span></span></div> <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a href="/" class="router-link-active no-logo home-link"><!----> <span class="site-name">CatchAdmin 官网</span></a> <div class="search-box mobile-search"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div> <div class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><ul role="menu" id="nav" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/" class="router-link-active">
          🏠首页
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item ant-menu-item-selected"><a href="/docs/" class="router-link-active">
          📖文档
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/laravel/">
          📖Laravel
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/faq/">
          🤔FAQ
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/donate/">
          🎉赞助名单
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          🚀仓库地址
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul> <!----></nav></div></div> <!----></header> <aside class="sidebar"><div><div class="ads"><div id="ads_1"><img src="https://cover.kancloud.cn/akasishikelu/thinkphp6!middle"> <span title="基于 catchadmin 的 Thinkphp 6.0 企业级后台管理开发&amp;源码分析">基于 catchadmin 的 Thinkphp 6.0 企业级后台管理开发&amp;源码分析</span></div></div> <div role="separator" id="reset-margin" class="ant-divider ant-divider-horizontal ant-divider-dashed"></div></div> <ul class="sidebar-links"><li><a href="/docs/" aria-current="page" title="项目介绍" class="sidebar-link">项目介绍</a></li><li><a href="/docs/install.html" title="项目安装" class="sidebar-link">项目安装</a></li><li><a href="/docs/project-introduce.html" title="目录结构" class="sidebar-link">目录结构</a></li><li><a href="/docs/console.html" title="命令介绍" class="sidebar-link">命令介绍</a></li><li><a href="/docs/request.html" title="请求介绍" class="sidebar-link">请求介绍</a></li><li><a href="/docs/model.html" title="模型介绍" class="sidebar-link">模型介绍</a></li><li><a href="/docs/dataScope.html" title="权限介绍" class="sidebar-link">权限介绍</a></li><li><a href="/docs/extend.html" title="项目扩展" class="sidebar-link">项目扩展</a></li><li><a href="/docs/http.html" title="Http客户端" class="sidebar-link">Http客户端</a></li><li><a href="/docs/excel.html" title="Excel" class="sidebar-link">Excel</a></li><li><a href="/docs/sensitiveWord.html" title="敏感词" class="sidebar-link">敏感词</a></li><li><a href="/docs/crontab.html" title="定时任务新版" class="sidebar-link">定时任务新版</a></li><li><a href="/docs/catch-table.html" title="表格组件" class="sidebar-link">表格组件</a></li><li><a href="/docs/front.html" aria-current="page" title="前端开发" class="active sidebar-link">前端开发</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/front.html#去除动画效果" title="去除动画效果" class="sidebar-link">去除动画效果</a></li><li class="sidebar-sub-header"><a href="/docs/front.html#keep-alive" title="keep-alive" class="sidebar-link">keep-alive</a></li><li class="sidebar-sub-header"><a href="/docs/front.html#diglog-拖拽" title="Diglog 拖拽" class="sidebar-link">Diglog 拖拽</a></li><li class="sidebar-sub-header"><a href="/docs/front.html#表格操作-请采用-catch-table-组件-后期会废除" title="表格操作(请采用 catch-table 组件，后期会废除)" class="sidebar-link">表格操作(请采用 catch-table 组件，后期会废除)</a></li></ul></li></ul></aside> <main class="page"> <div class="theme-antdocs-content content__default"><h1 id="前端开发"><a href="#前端开发" class="header-anchor">#</a> 前端开发</h1> <h3 id="非常重要的更新"><a href="#非常重要的更新" class="header-anchor">#</a> 非常重要的更新</h3> <p>前端模块也需要单独安装自己的组件
例如 <code>permissions</code> 模块下面就有 <code>router.js</code></p> <div class="language- extra-class"><pre class="language-text"><code>export default {
  users: () =&gt; import('@/views/permission/users'),
  roles: () =&gt; import('@/views/permission/roles'),
  rules: () =&gt; import('@/views/permission/rules'),
  departments: () =&gt; import('@/views/permission/departments'),
  jobs: () =&gt; import('@/views/permission/jobs')
}
</code></pre></div><p>如果是老项目，那么就需要你切割 config/componentsMap.js 到每个模块下的 router.js。
新项目就按照当前模式开发就可以了</p> <h2 id="去除动画效果"><a href="#去除动画效果" class="header-anchor">#</a> 去除动画效果</h2> <p>找到</p> <div class="language-js extra-class"><pre class="language-js"><code>@<span class="token operator">/</span>layout<span class="token operator">/</span>components<span class="token operator">/</span>AppMain<span class="token punctuation">.</span>vue
</code></pre></div><p>这里在 <code>app-main</code> 外部包了一层 <code>keep-alive</code> 主要是为了缓存 <code>router-view</code>的，配合页面的 <code>tabs-view</code> 标签导航使用，如不需要可自行去除。</p> <p>其中<code>transition</code> 定义了页面之间切换动画，可以根据自己的需求，自行修改转场动画。相关文档。默认提供了<code>fade</code>和<code>fade-transform</code>两个转场动画，具体 <code>css</code> 实现见<code>transition.scss</code>。如果需要调整可在<code>AppMain.vue</code>中调整<code>transition</code> 的 <code>name</code>。</p> <h2 id="keep-alive"><a href="#keep-alive" class="header-anchor">#</a> keep-alive</h2> <p>找到</p> <div class="language-js extra-class"><pre class="language-js"><code>@<span class="token operator">/</span>layout<span class="token operator">/</span>components<span class="token operator">/</span>AppMain<span class="token punctuation">.</span>vue
</code></pre></div><p>以下代码</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>keep<span class="token operator">-</span>alive <span class="token operator">:</span>include<span class="token operator">=</span><span class="token string">&quot;cachedViews&quot;</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>router<span class="token operator">-</span>view <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;key&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>keep<span class="token operator">-</span>alive<span class="token operator">&gt;</span>
</code></pre></div><p>去除 <code>include</code> 和 <code>key</code> 即可。</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>目前缓存的方案对于某些业务是不适合的，比如文章详情页这种 <code>/article/1</code> <code>/article/2</code>，他们的路由不同但对应的组件却是一样的，所以他们的组件 <code>name</code> 就是一样的，就如前面提到的，<code>keep-alive</code>的 <code>include</code>只能根据组件名来进行缓存，所以这样就出问题了。目前有两种解决方案：</p> <p>不使用 <code>keep-alive</code> 的 <code>include</code> 功能 ，直接是用 <code>keep-alive</code> 缓存所有组件，这样子是支持前面所说的业务情况的。当然直接使用 <code>keep-alive</code> 也是有弊端的，他并不能动态的删除缓存，你最多只能帮它设置一个最大缓存实例的个数 <code>limit</code>。</p></div> <h2 id="diglog-拖拽"><a href="#diglog-拖拽" class="header-anchor">#</a> Diglog 拖拽</h2> <p>引入拖拽指令</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> elDragDialog <span class="token keyword">from</span> <span class="token string">'@/directive/el-drag-dialog'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  directives<span class="token operator">:</span> <span class="token punctuation">{</span> elDragDialog <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><p>在 <code>Dialog</code> 上使用指令</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;el-dialog
  v-el-drag-dialog
/&gt;
</code></pre></div><h2 id="表格操作-请采用-catch-table-组件-后期会废除"><a href="#表格操作-请采用-catch-table-组件-后期会废除" class="header-anchor">#</a> 表格操作(请采用 catch-table 组件，后期会废除)</h2> <p>下面的操作基于 引入 mixins，</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> formOperate <span class="token keyword">from</span> <span class="token string">'@/layout/mixin/formOperate'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  mixins<span class="token operator">:</span> <span class="token punctuation">[</span>formOperate<span class="token punctuation">]</span>
<span class="token punctuation">}</span>

</code></pre></div><h3 id="参数"><a href="#参数" class="header-anchor">#</a> 参数</h3> <ul><li>formName: string ｜ 表名</li> <li>formFieldsData: object ｜ 表单对象</li> <li>queryParam: object ｜ 搜索参数
<ul><li>defaultQueryParam: array | 默认搜索参数</li></ul></li> <li>refreshRoute: bool | 刷新路由（一般用不到）</li> <li>url: string | 请求的操作的 URL</li></ul> <h3 id="新增"><a href="#新增" class="header-anchor">#</a> 新增</h3> <ul><li>beforeCreate: function | 新增前</li> <li>handleCreate: function</li></ul> <h3 id="更新"><a href="#更新" class="header-anchor">#</a> 更新</h3> <ul><li>beforeUpdate: function | 更新前</li> <li>handleUpdate: function</li></ul> <h3 id="删除"><a href="#删除" class="header-anchor">#</a> 删除</h3> <ul><li>beforeDelete: function | 删除前</li> <li>handleDelete: functio</li></ul> <h3 id="批量删除"><a href="#批量删除" class="header-anchor">#</a> 批量删除</h3> <ul><li>handleSelectMulti: function | 批量选择</li> <li>beforeMultiDelete: function | 批量删除前</li> <li>handleMultiDelete: function</li></ul> <h3 id="提交"><a href="#提交" class="header-anchor">#</a> 提交</h3> <ul><li>beforeSubmit: function | 提交前</li> <li>handleSubmit: function</li></ul> <h3 id="取消"><a href="#取消" class="header-anchor">#</a> 取消</h3> <ul><li>handleCancel: function</li> <li>afterCancel: function | 取消后</li></ul> <h3 id="搜索"><a href="#搜索" class="header-anchor">#</a> 搜索</h3> <ul><li>handleSearch</li></ul> <h3 id="刷新"><a href="#刷新" class="header-anchor">#</a> 刷新</h3> <ul><li>handleRefresh</li></ul> <h3 id="分页"><a href="#分页" class="header-anchor">#</a> 分页</h3> <div class="language- extra-class"><pre class="language-text"><code>&lt;el-pagination
  background
  @size-change=&quot;handleSizeChange&quot;
  @current-change=&quot;handleCurrentChange&quot;
  :current-page=&quot;paginate.current&quot;
  hide-on-single-page
  :page-sizes=&quot;paginate.sizes&quot;
  :page-size=&quot;paginate.limit&quot;
  :layout=&quot;paginate.layout&quot;
  :total=&quot;paginate.total&quot;/&gt;
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/catch-admin/document/edit/master/docs/docs/front.md" target="_blank" rel="noopener noreferrer">在 Github 编辑此页</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">更新时间:</span> <span class="time">11/23/2020, 6:16:27 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><a href="/docs/catch-table.html" class="prev"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>
        表格组件
      </a></span> <!----></p></div> </main> <!----></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.d0396f44.js" defer></script><script src="/assets/js/2.1cef47df.js" defer></script><script src="/assets/js/14.ec2753db.js" defer></script>
  </body>
</html>